<template>
    <form class="sift">
            <!-- 成员 -->
            <label for="member">家庭成员</label>
            <el-select v-model="siftInfo.member" id="member" placeholder="请选择" style="width: 120px;margin-right:40px">
                <el-option v-for="item in memberStore.member" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
            <!-- 收入分类 -->
            <label for="type1">分类</label>
            <el-select v-model="siftInfo.typeKey" placeholder="请选择" style="width: 120px;margin-right:40px">
                <el-option v-for="item in financeStore.incomeType" :key="item.id" :label="item.typeName" :value="item.id" />
            </el-select>
            <!-- 后续需加入： 日期、金额 -->
            <el-button @click="$emit('filterChange')">筛选</el-button>
            <el-button @click="clearSiftedInfo">清空选择</el-button>
        </form>
</template>

<script setup lang="ts">
import useMemberStore from '@/store/modules/member'
import useFinanceStore from '@/store/modules/finance';
import { SiftedIncome } from '@/types/income';

defineEmits(['filterChange'])
let siftInfo = defineModel<SiftedIncome>('siftInfo',{
    required:true
})
const memberStore = useMemberStore()
const financeStore = useFinanceStore()
const clearSiftedInfo = ()=>{
    siftInfo.value = {
        page:1,
        pageSize:10
    }
}
</script>

<style scoped>
.sift {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid rgb(2, 209, 232);
    border-radius: 5px;



    label {
        margin-right: 10px;
        color: rgb(74, 74, 74);
    }
}
</style>